<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="450px" :title="`${drawerProps.title}用户`">
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
    >
      <el-form-item label="用户头像" prop="avatar">
        <UploadImg
          v-model:image-url="drawerProps.row!.wechat_headimage"
          height="140px"
          width="140px"
          border-radius="50%"
          :file-size="3"
        >
          <template #empty>
            <el-icon><Avatar /></el-icon>
            <span>请上传头像</span>
          </template>
          <template #tip> 头像大小不能超过 3M </template>
        </UploadImg>
      </el-form-item>
      <!--      <el-form-item label="用户照片" prop="photo">
        <UploadImgs v-model:file-list="drawerProps.row!.photo" height="140px" width="140px" border-radius="50%">
          <template #empty>
            <el-icon><Picture /></el-icon>
            <span>请上传照片</span>
          </template>
          <template #tip> 照片大小不能超过 5M </template>
        </UploadImgs>
      </el-form-item>-->
      <el-form-item label="手机号码" prop="username">
        <el-input
          v-model="drawerProps.row!.username"
          oninput="value=value.replace(/[^0-9]/g,'').slice(0,11)"
          placeholder="请填写手机号码"
          :disabled="drawerProps.title === '编辑'"
          clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item label="用户密码" prop="password" v-show="drawerProps.title === '新增'">
        <el-input v-model="drawerProps.row!.password" placeholder="请填写密码" type="password" clearable></el-input>
      </el-form-item>
      <el-form-item label="用户姓名" prop="real_name">
        <el-input v-model="drawerProps.row!.real_name" placeholder="请填写用户姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="微信昵称" prop="wechat_nick">
        <el-input v-model="drawerProps.row!.wechat_nick" placeholder="请填写微信昵称" clearable></el-input>
      </el-form-item>
      <!--      <el-form-item label="状态" prop="gender">-->
      <!--        <el-switch v-model="drawerProps.row!.is_enabled" inline-prompt :active-icon="Check" :inactive-icon="Close" />-->
      <!--      </el-form-item>-->
      <!--
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="drawerProps.row!.idCard" placeholder="请填写身份证号" clearable></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="drawerProps.row!.email" placeholder="请填写邮箱" clearable></el-input>
      </el-form-item>
      <el-form-item label="居住地址" prop="address">
        <el-input v-model="drawerProps.row!.address" placeholder="请填写居住地址" clearable></el-input>
      </el-form-item>-->
    </el-form>
    <template #footer>
      <div class="button-container">
        <el-button
          type="primary"
          plain
          @click="permission(drawerProps.row)"
          style="margin-right: auto"
          v-show="drawerProps.title !== '新增'"
        >
          查看权限
        </el-button>
        <el-button style="display: none"></el-button>
        <el-button @click="drawerVisible = false">取消</el-button>
        <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </template>
  </el-drawer>
  <div v-if="show">
    <Permission ref="permissionRef" />
  </div>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { User } from "@/api/interface";
import UploadImg from "@/components/Upload/Img.vue";
import Permission from "@/views/system/accountManage/componet/permission/index.vue";
// import UploadImgs from "@/components/Upload/Imgs.vue";

const rules = reactive({
  username: [
    { required: true, message: "请填写手机号码", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "请输入有效的手机号码", trigger: "blur" }
  ],
  real_name: [{ required: true, message: "请填写姓名", trigger: "blur" }],
  password: [{ required: true, message: "请填写密码", trigger: "blur" }]
});

const show = ref(false);
const permissionRef = ref<InstanceType<typeof Permission> | null>(null);
const permission = (row: any) => {
  show.value = true;
  console.log(row, "row");
  let params = {
    id: row.id,
    title: row.real_name
  };

  permissionRef.value?.acceptParams(params);
};

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<User.ReUserList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {}
});

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  console.log(params, "params");
  drawerProps.value = params;
  drawerVisible.value = true;

  // 根据新增或编辑动态调整规则
  if (params.title === "新增") {
    rules.username = [
      { required: true, message: "请填写手机号码", trigger: "blur" },
      { pattern: /^1[3-9]\d{9}$/, message: "请输入有效的手机号码", trigger: "blur" }
    ];
    rules.real_name = [{ required: true, message: "请填写姓名", trigger: "blur" }];
    rules.password = [{ required: true, message: "请填写密码", trigger: "blur" }];
  } else {
    rules.username = [];
    rules.real_name = [{ required: true, message: "请填写姓名", trigger: "blur" }];
    rules.password = [];
  }
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = async () => {
  try {
    let valid = await ruleFormRef.value!.validate();
    if (!valid) return;
    await drawerProps.value.api!(drawerProps.value.row);
    ElMessage.success({ message: `${drawerProps.value.title}用户成功！` });
    drawerProps.value.getTableList!();
    drawerVisible.value = false;
  } catch (error) {
    console.log(error);
  }
};

defineExpose({
  acceptParams
});
</script>
<style>
.button-container {
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中对齐 */
}
</style>
